<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- reset.css  -->
		<style>
			/* reset */
			* {
				box-sizing: border-box;
			}

			html,
			body,
			p,
			div,
			h1,
			h2,
			h3 {
				margin: 0;
				padding: 0;
			}


			.phone {

				width: 300px;
				height: 600px;
				background-color: antiquewhite;
				margin: 0 auto;
				position: relative;
				margin-top: 30px;
			}

			.footer {

				width: 100%;
				height: 50px;
				background-color:#666;
				position: absolute;
				bottom: 0;
				font-size: 0;
			}

			.footer>div {
				font-size: 16px;
				display: inline-block;
				width: 33%;
				height: 100%;
				border: solid 1px red;
				text-align: center;
				line-height: 50px;
			}
			
			.message{
				position: relative;
			}
			
			
			.dot{
				position: absolute;
				right: 0px;
				top: -10px;
				width: 30px;
				height: 30px;
				border-radius: 15px;
				line-height: 30px;
				background-color: #ff0000;
				
			}
		</style>
	</head>
	<body>


		<div class="phone">


			<div class="footer">
				<div class="message">消息
					
					<div class="dot">2</div>
				
				</div>
				<div>通讯录</div>
				<div>我的</div>
			</div>



		</div>


	</body>
</html>